<template>
	<view class="sale-out page">
		<view class="header">
			<image class="avatar" :src="imgH+shop.logo"></image>
			<text class="name">{{shop.name}}</text>
			<text class="info">{{shop.info}}</text>
		</view>
		
		<view class="banner">
			<image v-for="(item,index) in bannerList" :key="index" class="img" :src="item.img" mode=""></image>
		</view>
		<view class="top-list">
			<view class="title">商家推荐</view>
			<scroll-view enable-flex="true" style="width: 100%;" class="scroll" scroll-x="true">
			<view class="items">
				
				<view class="item" v-for="(item,index) in topList" :key="index">
					<image class="img" :src="item.minImg" mode=""></image>
					<view class="info">
						<text class="name">{{item.name}}</text>
						<text class="price">￥{{item.nowPrice}}</text>
						<!-- <sale-num-edit @add="add" @dec="dec" :value="0" :goodsId="goods.id" class="edit"></sale-num-edit> -->
						<sale-num-edit :key="item.id" :sk="item.id" @add="add" @dec="dec" :value="cartNumber[item.id]" class="edit" ></sale-num-edit>
					</view>
				</view>
			</view>
			</scroll-view>
		</view>
		<view class="goods-list" >
			<view class="left">
				<scroll-view style="height: 100%;" class="scroll" scroll-y="true">
				<view class="items">
					<view @click="sel(index)" :class="{sel:sidx==index}" class="name" v-for="(type,index) in typeList" :key="index">{{type.name}}</view>
				</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view :scroll-with-animation="true" :scroll-top="scrollTop"  @scroll="scroll" style="height: 100%;" class="scroll" scroll-y="true">
				<view class="items">
					<view  class="item goods" v-for="(type,index) in typeList" :key="index">
						<view class="title">{{type.name}}</view>
						<view class="goods" v-for="(goods,idx) in map[type.id]" :key="goods.id">
							<image class="img" :src="imgH+goods.minImg" ></image>
							<view class="goods-info">
								<text class="name">{{goods.name}}</text>
								<text class="desc">{{goods.info}}</text>
								<view class="prices">
									<text class="price">￥{{goods.nowPrice}}</text>
									<sale-num-edit :key="goods.id" :sk="goods.id" @add="add" @dec="dec" :value="cartNumber[goods.id]" ></sale-num-edit>
								</view>
							</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
		</view>
		
		
		<mall-sku @selectSku="selectSku" v-if="showSku" :show.sync="showSku" :goods="skuGoods"></mall-sku>
		<sale-cart-bar :price="sendStart" :type="type" @toCommit="toCommit" @update="updateCart" :cart="cart"></sale-cart-bar>
	</view>
</template>

<script>
	import saleNumEdit from '@/components/sale-num-edit/sale-num-edit.vue'
	import {shopInfo,saleGoods,saleGoodsInfo} from '@/api/home.js'
	import CONFIG from '@/config/index.js'
	import {getOutCart,setOutCart} from '@/storage/index.js'
	import {addCart,decCart} from '@/common/js/cart.js'
	import mallSku from '@/components/mall-sku/mall-sku.vue'
	import {showError} from '@/toast/index.js'
	import saleCartBar from '@/components/sale-cart-bar/sale-cart-bar.vue'
	export default {
		onShow(){
		  //购物车
		  this.cart = getOutCart()
		  //店铺信息
		  this.shopId = this.$Route.query.shopId	
		  shopInfo(this.shopId).then(res => {
			  this.shop = res.data
		  })
		  //产品信息
		  saleGoods(this.type).then(res => {
			  this.map = res.extra.map
			  this.typeList = res.extra.typeList
			  this.banners = res.extra.banners
			  this.topList = res.extra.topList.filter(top => {
				  top.minImg = CONFIG.IMG_HEAD + top.minImg
				  return true;
			  })
			  this.$nextTick(()=>{
			  	this.initHeight()
			  })
		  })
		 
		},
		methods:{
			toCommit(){
				this.$Router.push({
					path:"/pages/sale/order/commit",
					query:{
						shopId:this.shopId,
						type:this.type
					}
				})
			},
			updateCart(cart){
			   this.cart = cart	
			   setOutCart(this.cart)
			},
			selectSku(sku,number,goods){
				this.cart = addCart(this.cart,goods,sku,number)
				setOutCart(this.cart)
			},
			add(id){
				//如果已经获取了skuMap
				if(this.skuGoodsMap[id]){
					if(this.skuGoodsMap[id].skuList.length>0){
						this.skuGoods = this.skuGoodsMap[id]
						this.showSku = true
					}else{
						this.cart = addCart(this.cart,this.skuGoodsMap[id],null,1)
						setOutCart(this.cart)
					}
				}else{ //没有获取skuMap
					saleGoodsInfo(id).then(res => {
						this.skuGoodsMap[id] = res.data
						if(res.data.skuList.length > 0){
							this.skuGoods = res.data
							this.showSku = true
						}else{
							this.cart = addCart(this.cart,res.data,null,1)
							setOutCart(this.cart)
						}
					})
				}
			
			},
			dec(id){
				if(this.skuGoodsMap[id]){
						if(this.skuGoodsMap[id].skuList.length>0){
							showError("多规格商品去下方购物车删除")
						}else{
							this.cart = decCart(this.cart,{id},null,1)
							setOutCart(this.cart)
						}
				}else{
					saleGoodsInfo(id).then(res => {
						this.skuGoodsMap[id] = res.data
						if(res.data.skuList.length > 0){
							showError("多规格商品去下方购物车删除")
						}else{
							this.cart = decCart(this.cart,res.data,null,1)
							setOutCart(this.cart)
						}
					})
				}
			},
		   sel(index){
			   if(index>0){
				    this.scrollTop = this.heights[index-1]
			   }else{
				    this.scrollTop = 0
			   }
			  
		   },	
		   scroll(e){
			   this.top = e.detail.scrollTop
		   },
		   initHeight(){
			   const query = wx.createSelectorQuery()
			   query.selectAll('.item.goods').boundingClientRect()
			   this.heights = []
			   query.exec((res)=>{
				   let h = 0
				   res[0].forEach(r => {
					    h+=r.height
					    this.heights.push(h)
				   })
			   })
		   }	
		},
		components:{
			saleNumEdit	,mallSku,saleCartBar
		},
		computed:{
			sendStart(){
				return getApp().globalData.config.sendStart
			},
			cartNumber(){
				//TODO 累计重复
				let map = {}
				Object.values(this.cart).forEach(item => {
					if(map[item.goodsId]){
						map[item.goodsId] += item.number
					}else {
						map[item.goodsId] = item.number
					}
					
				})
				return map
			},
			sidx(){
				let index = 0;
				for (var i = 0; i < this.heights.length; i++) {
					let h = this.heights[i]
					if(h>this.top){
						index = i
						break
					}
				}
				return index
			},
			imgH(){
			  return 	 CONFIG.IMG_HEAD 
			},
			bannerList(){
			return	this.banners.filter(banner => {
				banner.img = CONFIG.IMG_HEAD + banner.img
				return	banner.type == 2
				})
			}
		},
		data() {
			return {
				shopId:null,
				showSku:false,
				skuGoods:null,
				skuGoodsMap:{},
				cart:{},
				scrollTop:0,
				top:0,
				shop:{},
				type:0,
				map:{},
				typeList:[],
				topList:[],
				banners:[],
				heights:[]
			};
		}
	}
</script>

<style lang="stylus" scoped>
	.sale-out
		background url(../../static/hbg.png) no-repeat
		background-size 100% 150upx
		background-color #FFFFFF
		.header
			display flex
			justify-content center
			flex-direction column
			align-items center
			.avatar
				width 200upx
				height 200upx
				border-radius 50%
				margin-top 58upx
			.name
				color #2B1919
				margin-top 14upx
				margin-bottom 42upx
			.info
				color #696060
				font-size 22upx
		.banner
			padding 0 20upx
			margin-top 36upx
			.img
				width 100%
				height 200upx
		.top-list
			padding-left 20upx
			.title
				color #000000
				font-size 30upx
				height 102upx
				display flex
				align-items center
			.items
				width fit-content
				display flex
				.item
					margin-right 20upx
					display flex
					flex-direction column
					width 250upx
					.img
						width 100%
						height 250upx
					.info
						height 117upx
						display flex
						flex-direction column
						justify-content center
						position relative
						.name
							color #000000
							font-size 30upx
							margin-bottom 10upx
						.price
							color #009C4E
							font-size 30upx
						.edit
							position absolute
							bottom 12upx
							right 0
		.goods-list
			display flex
			max-height 800upx
			padding-bottom 150upx
			margin-top 32upx
			.left
				width 162upx
				background-color #EFEFEF
				.items
					display flex
					flex-direction column
					.name
						padding 0 22upx
						height 110upx
						display flex
						align-items center
						justify-content center
						color #696060
						font-size 24upx
						&.sel
							background-color white
			.right
				flex 1
				.items
					display flex
					flex-direction column
					background-color white
					.item
						.title
							margin-left 30upx
							display flex
							align-items center
							color #000000
							font-size 24upx
						.goods
							padding-left 15upx
							display flex
							padding-right 39upx
							margin-top 27upx
							margin-bottom 10upx
							.img
								width 200upx
								height 200upx
							.goods-info
								flex 1
								margin-left 18upx
								display flex
								flex-direction column
								justify-content space-between
								.name
									color #000000
									font-size 32upx
								.desc
									color #695F5F
									font-size 18upx
									line-height 30upx
									margin-right 60upx
								.prices
									display flex
									align-items center
									justify-content space-between
									.price
										color #009C4E
										font-size 30upx		
		
							
						
				
						
					
				
		
		
</style>
